<template>
    <div class="item">
        <div class="head f14">
            <div class="shop" @click="goShop(item.member_id)" v-if="item.is_show == 1">
                <img src="@/assets/images/shop-icon.png">
                <span class="title">{{ item.shopname }}</span>
            </div>
            <span class="state" v-if="show">{{ item.order_status_name }}</span>
            <img class="turn-right" v-else src="@/assets/images/down.png">
        </div>
        <div class="detail" @click="orderInfoHandle(item.id)" :class="{ active: !show }">
            <img class="goods-img" v-if="item.imgurl" v-lazy="getOtherImageUrl(item.imgurl)">
            <div class="content">
                <span class="title f14">{{ item.goods_title }}</span>
                <div class="config f14">
                    <span>套装:</span>
                    <span>{{ item.setmeal_title }}</span>
                </div>
                <div class="time f14">
                    <span>租期:</span>
                    <span>{{ item.lease_time }}</span>
                </div>
                <div class="price" v-if="show">
                    <div class="left f14">
                        <span class="all">总租金:</span>
                        <span class="value">{{ item.rent_total }}</span>
                        <span class="count">(分{{ item.month_total }}期)</span>
                    </div>
                    <span class="number f14">x1</span>
                </div>
                <div class="max-count f14" v-else>
                    <span>数量:</span>
                    <span>{{ item.amount }}</span>
                </div>
            </div>
        </div>
        <div class="foot" v-if="show">
            <span class="left f14">{{ MaxLength ? "更多" : "" }} </span>
            <div class="right">
                <MyButton v-for="(ele, index) in getButtonData(item.status)" :key="index" :title="ele.name"
                    @handle="myButtonClick(ele.path, item.id)">
                </MyButton>
            </div>
        </div>
    </div>
</template>
<script>
import MyButton from './MyButton.vue';
import orderBtns from "@/common/orderBtns";
import orderBtnsHandle from "@/common/orderBtnsHandle";
export default {
    name: "Card",
    props: {
        item: Object,
        show: {
            type: Boolean,
            default: true,
        }
    },
    components: {
        MyButton
    },
    data() {
        return {
            MaxLength: false,
        }
    },
    methods: {
        buyoutHandle(order_id) {
            this.$sendGet("Order/getOrderBuyoutData", { order_id })
                .then(res => {
                    const { data } = res.data;
                    console.log(data);
                })
        },
        myButtonClick(path, id) {
            orderBtnsHandle[path](id);
        },
        getButtonData(num) {
            const array = [];
            orderBtns.forEach(item => {
                if (array.length < 3) {
                    if (item.status.includes(num))
                        array.push(item)
                } else {
                    this.MaxLength = true
                }
            })
            return array;
        },
        goShop(member_id) {
            this.$router.push({ name: "shop", query: { member_id } })
        },
        orderInfoHandle(order_id) {
            this.$router.push({ name: "order-info", query: { order_id } })
        }
    }
}
</script>
<style lang="scss" scoped>
.item {
    background-color: white;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;

    .head {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        padding-bottom: 20px;

        .shop {
            display: flex;
            align-items: center;

            img {
                width: 18px;
                object-fit: contain;
                margin-right: 10px;
            }
        }

        .state {
            color: #d79e63;
        }

        .turn-right {
            transform: rotateZ(270deg) scale(.8)
        }
    }

    .detail {
        display: flex;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
        position: relative;

        &.active {
            border-bottom: 0;
        }

        .goods-img {
            width: 140px;
            padding: 10px;
            object-fit: contain;
        }

        .content {
            padding: 10px;
            padding-left: 0;
            display: flex;
            flex-direction: column;

            .title {
                margin-bottom: 8px;
            }

            .config {
                margin-bottom: 8px;
                color: #c3c3c3;
            }

            .time {
                margin-bottom: 8px;
                color: #c3c3c3;
            }

            .max-count {
                color: #c3c3c3;
            }

            .price {
                display: flex;
                align-items: center;
                margin-top: 12px;

                .number {
                    position: absolute;
                    right: 10px;
                    color: #c3c3c3;
                }

                .left {
                    .value {
                        margin: 0 5px;
                    }
                }
            }
        }
    }

    .foot {
        height: 50px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            flex-shrink: 0;
            color: #c3c3c3;
        }

        .right {
            display: flex;
            flex-direction: row-reverse;
        }
    }
}
</style>